<template>
  <view class="bd">
    <view class="subject">
      <view class="title t1"> {{ idx }}.{{ subTitle }} </view>
      <view class="answer">
        <u-radio-group v-model="value" shape="circle" :wrap="true">
          <u-radio
            @change="radioChange"
            v-for="(item, index) in list"
            :key="index"
            :name="item.id"
            :disabled="item.disabled"
          >
            <span class="t1">{{ item.tag }} {{ item.item }}</span>
          </u-radio>
        </u-radio-group>
      </view>
    </view>
    <u-button class="btns" @tap="nextarr"> 上一题</u-button>
    <u-button class="btns" @tap="nextdor" v-show="finbt != 2"> 下一题</u-button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      value: "orange",
      idx: "", //题号
      subTitle: "", //标题
      subTitleId: "", //题目id
      selectId: "", //选项id
      repid: "",
      finbt: "", //接收最后一道题的标识
    };
  },
  onLoad(options) {
    //console.log(options)
    this.id = options.id;
    this.repid = options.rid;
    this.goData();
  },
  onReady() {
    // this.getUiStyle();
  },
  methods: {
    getUiStyle() {
      var style = plus.navigator.getUiStyle();
      if ("dark" == style) {
        console.log("当前为暗黑模式");
        uni.setTabBarStyle({
          backgroundColor: "#1B1C1E",
        });
        uni.setNavigationBarColor({
          frontColor: "#ffffff",
          backgroundColor: "#1B1C1E",
          animation: {
            duration: 400,
            timingFunc: "easeIn",
          },
        });
      } else {
        console.log("当前为普通模式");
      }
    },
    //获取第一道题
    goData() {
      let self = this;
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .post("/evaluating/getSubjectOrRecords", {
          id: this.id,
          isRepeat: this.repid,
        })
        .then((res) => {
          uni.hideLoading();
          //console.log(res)
          if (res.data.code === 200) {
            self.subTitle = res.data.data.data.subject.subject;
            self.subTitleId = res.data.data.data.subject.id; //题目的id
            self.list = res.data.data.data.subjectItem;
            self.idx = res.data.data.data.subject.serialNumber;
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    // 选中某个单选框时，由radio时触发
    radioChange(e) {
      this.selectId = e;
    },
    //上一题
    nextarr() {
      let self = this;
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .post("/evaluating/getPrevious", {
          subjectId: self.subTitleId,
        })
        .then((res) => {
          uni.hideLoading();
          //console.log(res)
          if (res.data.code === 200) {
            self.finbt = res.data.data.type;
            if (res.data.data.data.subject != 1) {
              self.subTitle = res.data.data.data.subject.subject;
              self.subTitleId = res.data.data.data.subject.id;
              self.list = res.data.data.data.subjectItem;
              self.idx = res.data.data.data.subject.serialNumber;
            } else {
              uni.showToast({
                title: "当前为第一题",
              });
            }
          } else {
            uni.showToast({
              title: self.config.handleError(res.data),
              icon: "none",
            });
          }
        });
    },
    //下一题
    nextdor() {
      //console.log(this.selectId)
      if (this.selectId != "") {
        let self = this;
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        setTimeout((s) => {
          uni.hideLoading();
        }, 5000);
        this.config
          .post("/evaluating/getNext ", {
            subjectId: self.subTitleId,
            subjectItemId: self.selectId,
          })
          .then((res) => {
            uni.hideLoading();
            //console.log(res)
            if (res.data.code === 200) {
              self.finbt = res.data.data.type;
              if (res.data.data.type == 1) {
                self.subTitle = res.data.data.data.subject.subject;
                self.subTitleId = res.data.data.data.subject.id;
                self.list = res.data.data.data.subjectItem; //获取选项list
                self.finbt = res.data.data.data.type;
                self.selectId = "";
                self.idx = res.data.data.data.subject.serialNumber;
              } else {
                uni.showToast({
                  title: "答题完毕",
                });
                let id = res.data.data.data.id;
                uni.navigateTo({
                  url: "/pages/main/child/archives/evaluation-results?id=" + id,
                });
              }
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          });
      } else {
        uni.showToast({
          title: "请先选择答案",
          icon: "none",
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
page {
  background-color: #f9f9f9;
}

.subject {
  width: 100%;

  .title {
    border: 4px solid #ececec;
    padding: 20upx;
    font-size: 30upx;
    font-weight: bold;
    color: #222222;
    line-height: 50upx;
  }

  .answer {
    padding: 40upx;
    font-size: 30upx;
    color: #222222;
    line-height: 50upx;
  }
}
.btns {
  background-color: #18c7e1;
  color: #fff;
  background-color: #18c7e1;
  width: 40%;
  margin-right: 10rpx;
  float: left;
  margin-left: 40rpx;
}
@media (prefers-color-scheme: closedark) {
  // page{
  // 	background-color: #1B1C1E;
  // 	height: 100%;
  // }
  .title {
    border: none !important;
    border-bottom: 3px solid #8f8f94 !important;
  }
  .bd {
    background-color: #1b1c1e !important;
    margin-top: -5px;
    height: 100vh;
  }
  .bd1 {
    background-color: #38383c !important;
  }
  .t1 {
    color: #ccc !important;
  }
}
</style>
